<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>行动派首页-beta-Demo展示，桃子同学的个人空间</title>
    <link rel="icon" href="/public/images/index/about/favicon.ico" >
    <link rel="stylesheet" href="/public/styles/base.css">
    <style>
        @font-face{font-family: "amable"; src:url('/public/font/amable-webfont.woff') format('woff'); font-weight: normal; font-style: normal; }
        html,body{height: 100%;font-size: 16px;}
        a{transition: color .3s ease;}
        a:hover{color:#7db500 !important;text-decoration: none;}
        /*加载页面*/
        .loading{position: fixed;width:100%;height:100%;left:0;top:0;z-index: 999;overflow: hidden;background: #252525;}
        .loading-inner{border-bottom: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px;
            box-shadow: 0 4px 4px -4px rgba(255, 255, 255, 0.4), 0 -3px 3px -3px rgba(255, 255, 255, 0.25), 0 0 12px 0 rgba(0, 0, 0, 0.5) inset;
            height: 20px; margin: auto; padding: 10px 20px; position: absolute; width: 80%; top: 35px; bottom: 0; left: 0; right: 0;}
        .loading.active .loading-inner{height: 0;border: none;box-shadow: none;transition: all 1.5s;}
        .loading.active .loading-inner:before{height: 0;transition: all 1s;border: none;opacity: 0;}
        .loading-inner:before{background: #222 none repeat scroll 0 0; border: 1px solid rgba(0, 0, 0, 0.8); border-radius: 20px;
            box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.85) inset; content: ""; display: block; height: 18px; left: 20px; position: absolute; top: 10px; width: calc(100% - 40px);}
        .loading-logo{position: absolute; left: 0; bottom: 42px; margin-left: 4px; background: url("/public/images/index/demo/demo_06/logo.png") no-repeat center; width: 35px; height: 38px; background-size: 100%;}
        .loading.active .loading-logo{left: 50% !important; margin-left: -70px; width: 55px; height: 59px; transition: all 1.5s;bottom:0;}
        .loading-line-box {background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(126, 234, 25, 1) 0%, rgba(83, 173, 0, 1) 100%) repeat scroll 0 0;border-radius: 16px;
            box-shadow: 0 0 12px 0 rgba(126, 234, 25, 1), 0 1px 0 0 rgba(255, 255, 255, 0.45) inset, 1px 0 0 0 rgba(255, 255, 255, 0.25) inset, -1px 0 0 0 rgba(255, 255, 255, 0.25) inset;
            display: block; height: 16px; left: 22px; overflow: hidden; position: absolute; top: 12px; width: 0;}
        .loading-line-box::before {background: rgba(0, 0, 0, 0) radial-gradient(ellipse at center center , rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.01) 50%, rgba(255, 255, 255, 0) 51%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0;
            content: ""; display: block; height: 150%; left: -25px; position: absolute; top: -25%; width: 606px;}
        .loading-line-box::after {background: rgba(0, 0, 0, 0) linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 98%, rgba(255, 255, 255, 0) 100%) repeat scroll 0 0;
            border-radius: 0 16px 16px 0; content: ""; display: block; height: 16px; position: absolute; right: 0; top: 0; width: 64px;}
        .loading.active .loading-line-box{height: 0}
        .loading-line {animation:sparkle 1500ms linear 0s normal none infinite running; background: rgba(0, 0, 0, 0) url("/public/images/index/demo/demo_06/dot.png") repeat scroll 0 0;
            border-radius: 16px; display: block; height: 64px; left: 0; opacity: 0.2; position: absolute; top: 0; width: 100%;}
        @keyframes sparkle {from {background-position:0 0;} to {background-position:0 -64px;}}
        .loading-text{position: relative; top: 50px; color: #fff; font-size: 20px; font-family: "amable","Microsoft Yahei"; display: block; text-align: center;}
        .loading.active .loading-text{top: -14px; margin-left: 40px;opacity: 0;transition: all .7s .4s;}

        .page-outer{height: 100%;opacity: 0;transition: opacity 1.5s;min-width: 960px;}
        .header{background: rgba(0,0,0,.7); position: fixed; top: 0; left: 0; z-index: 10; right: 0;}
        .header-inner{height: 60px;margin: 0 auto;width: 960px;}
        .header-logo{margin-top: 12px;float: left; background: url("/public/images/index/demo/demo_06/logo_white.png") no-repeat left; width: 99px; height: 35px; text-align: right; color: #fff; font-size: 20px; line-height: 40px; background-size: 31px; overflow: hidden;}
        .nav-list{float: right}
        .nav-list li{float: left;overflow: hidden}
        .nav-list li a{color: #fff; width: 85px; text-align: center; font-size: 14px; height: 57px; line-height: 57px; display: block; border-top: 3px solid transparent;}
        .nav-list li a:hover,.nav-list li a.active{border-top-color: #7db500; background: rgba(0,0,0,0.6); color: #7db500;}

        .unslider{position: relative;min-width: 960px;}
        .top-slider { position: relative;min-width: 960px;margin-bottom: -10px}
        .top-slider ul{position: absolute;height: 100%}
        .top-slider ul li {float: left; width: 100%; height: 100%; background-position: top center; background-size: 100%; background-repeat: no-repeat;position: relative}
        .top-slider ul .one{background-image: url("/public/images/index/demo/demo_06/img1.png");}
        .top-slider ul .two{background-image: url("/public/images/index/demo/demo_06/img2.png");}
        .top-slider ul .three{background-image: url("/public/images/index/demo/demo_06/img3.png");}
        .top-slider ul li span{font-size: 25px;color:#fff;position: absolute; left: 50%; top: 50%;}
        .top-slider ul .one span{text-align: center; margin: -50px 0;}
        .top-slider ul .two span{margin: -90px 140px;}
        .top-slider ul .three span{ margin: -109px 69px;}
        .unslider-nav{bottom: 20px; left: 0; margin: auto; position: absolute; right: 0; width: 129px;}
        .unslider-nav li {cursor: pointer; float: left; height: 3px; margin: 0 4px; opacity: 0.5; text-indent: -999em; background: #fff; transition: background 0.5s ease 0s, opacity 0.5s ease 0s; width: 35px;}
        .unslider-nav .unslider-active{background: #7db500 none repeat scroll 0 0;opacity: 1;}

        .content{}
        .section-gray{background: #f1f1f1;}
        .section-inner{width: 960px;margin: 0 auto;overflow: auto;}
        .section-inner-title{position: relative; overflow: auto; padding-top: 10px; width: 98%; margin: 0 auto;}
        .section-inner-title h4{margin: 0; font-size: 22px; font-weight: 200; line-height: 58px; color: #333;}
        .more-info{position: absolute;right: 0;top:29px;color: #000;font-size: 15px;}
        .tourism-list{ margin: -10px auto -30px; padding-bottom: 15px;}
        .tourism-list li{float: left; width: 200px; height: 140px; background: #fff; margin: 10px; transition: all .2s linear; overflow: hidden; padding: 10px;position: relative}
        .tourism-list a{overflow: hidden; height: 100%; display: block; position: relative;}
        .tourism-list .big{width: 440px;}
        .tourism-list li img{width: 100%; height: 140px; position: absolute; left: 0; top: 0;transition: all .2s linear;}
        .tourism-list li:hover{box-shadow: 0 15px 30px rgba(0,0,0,0.2);transform: translate3d(0, -3px, 0);}
        .tourism-list li h5{color:#fff;font-size: 16px;padding-left: 5px; margin-bottom: 5px;}
        .tourism-list li h6{color:#fff;padding-left: 5px; }
        .tourism-route{position: absolute; background: rgba(0,0,0,0.2); height: 25px; bottom: 0; color: #fff; font-size: 12px; line-height: 25px; padding-left: 5px; left: 0; right: 0;}
        .tourism-list li h5{margin-top: -40px;transition: margin-top .2s ease;}
        .tourism-list li .tourism-route{bottom:-25px;transition: bottom .2s ease;}
        .tourism-list li:hover h5{margin-top: 0}
        .tourism-list li:hover .tourism-route{bottom: 0}

        .section-inner-left{width: 675px;float: left;}
        .itinerary-list{float: left;width:30%;margin: 0 1.5%;}
        .itinerary-item{background: #fff;font:normal 12px "Microsoft YaHei";padding: 5px;margin-bottom: 20px;transition: all .2s linear;}
        .itinerary-item:hover{box-shadow: 0 15px 30px rgba(0,0,0,0.2);transform: translate3d(0, -3px, 0);}
        .itinerary-img-box{display: block;}
        .itinerary-img-box img{width: 100%;}
        .itinerary-title{color: #00a1cb; font-size: 13px; margin-top: 5px; display: block; text-align: justify; height: 33px; overflow: hidden;}
        .itinerary-title:hover{color:#7db500;}
        .itinerary-lite-info{color: #b5b5b5;margin: 5px 0;}
        .author-head{width: 25px; border-radius: 50%;}
        .author-name{vertical-align: middle; margin-left: 5px;}
        .create-time{float: right; margin-top: 5px; }
        .itinerary-abstract{color: #999; width: 95%; margin: 0 auto; text-align: justify; line-height: 1.8; height: 65px; overflow: hidden;}
        .itinerary-mark{overflow: auto;}
        .mark-item{float: right; color: #b5b5b5; margin: 0 5px;}
        .mark-item i{width: 16px;height: 11px;vertical-align: middle; margin-right: 2px;}
        .mark-item .view{background: url(/public/images/index/demo/demo_06/ico_view_count.png);}
        .mark-item .copy{background-image: url(/public/images/index/demo/demo_06/ico_copy_count.png); background-size: 85%; background-repeat: no-repeat; background-position: 0 -1px; height: 16px;}
        .mark-item .reply{background: url(/public/images/index/demo/demo_06/ico_reply_count.png);height: 14px;}

        .section-inner-right{float: left; margin-top: 68px;}
        .section-inner-right .inner{width: 275px;background: #fff; height: 291px;}
        .section-inner-right .recent-reply{margin-top: 20px;overflow: hidden;}
        .section-inner-right p{text-align: center;border-bottom: 1px solid #f1f1f1;color:#777;font-size: 14px;line-height: 25px;}
        .recent-itinerary-item{display: block; color: #000; margin: 9px; font-size: 12px; height: 17px; overflow: hidden;}
        .recent-itinerary-item .update-time{color:#999;}
        .recent-itinerary-item .name{color:#00a1cb;}
        .recent-reply-item {color: #000; margin: 3px 9px; font-size: 12px; height: 50px; float: left; width: 248px; overflow: hidden;}
        .recent-reply-item .user{display: inline-block; max-width: 48px; height: 19px; overflow: hidden; vertical-align: middle;}
        .recent-reply-item a{color: #00a1cb; max-width: 156px; display: inline-block; height: 19px; overflow: hidden; vertical-align: middle;}
        .recent-reply-item .content{color: #888; overflow: hidden; max-height: 33px; width: 90%; margin: 0 auto; text-align: justify;}

        .footer{height: 100px; background: #1a1a1a; margin-top: 0; font-size: 14px;color:#fff;}
        .footer-inner{width: 960px;margin: 0 auto;text-align: center}
        .link-list{text-align: center; }
        .link-list li{display:inline-block;}
        .link-list li a{color: #fff; margin-right: 15px;}
        .copyright-box{margin: 15px 0;}
        .footer-inner .logo{display: inline-block; width: 35px; vertical-align: baseline; margin-right: 8px;}
        .footer-inner .copyright{font-size: 12px; text-align: left; display: inline-block; width: 442px;}
    </style>
</head>
<body>
<div class="loading">
    <div class="loading-inner">
        <div class="loading-logo"></div>
        <div class="loading-line-box">
            <span class="loading-line"></span>
        </div>
        <span class="loading-text"><span class="number">0%</span></span>
    </div>
</div>
<div class="page-outer">
    <div class="header">
        <div class="header-inner">
            <div class="header-logo">行动派</div>
            <ul class="nav-list">
                <li><a href="javascript:;" class="active">首页</a></li>
                <li><a href="javascript:;">官方路书</a></li>
                <li><a href="javascript:;">创建路书</a></li>
                <li><a href="javascript:;">自驾社区</a></li>
                <li><a href="javascript:;">客户端下载</a></li>
            </ul>
        </div>
    </div>
    <div class="top-slider">
        <ul>
            <li class="one"><span>每个人都期待着一场旅行<br>一场说走就走的旅行</span></li>
            <li class="two"><span>为爱好自驾游的朋友<br>推荐美景美食<br>提供旅行规划<br>定制旅行路书</span></li>
            <li class="three"><span>热爱自由<br>不受拘束<br>我们都是行动派</span></li>
        </ul>
    </div>
    <div class="content">
        <!--官方路书-->
        <div class="section-gray">
            <div class="section-inner">
                <div class="section-inner-title">
                    <h4>官方路书</h4>
                    <a class="more-info" href="javascript:;">更多专题</a>
                </div>
                <ul class="tourism-list">
                    <li class="big" title="查看专题"><a href="javascript:;">
                        <img src="/public/images/index/demo/demo_06/tourism_1.jpg">
                        <h5 class="pr">湖光山色，短途畅游</h5>
                        <h6 class="pr">不走远路也能领略湖光山色的美景。</h6>
                        <span class="tourism-route">轿顶山-莲花湖-年保玉则-马湖-木格措</span>
                    </a></li>
                    <li title="查看专题"><a href="javascript:;">
                        <img src="/public/images/index/demo/demo_06/tourism_1_small.jpg">
                        <h5 class="pr">城市周边的秀美山川</h5>
                        <span class="tourism-route">中峰洞-高桥沟-达古冰川</span>
                    </a></li>
                    <li title="查看专题"><a href="javascript:;">
                        <img src="/public/images/index/demo/demo_06/tourism_1_small.jpg">
                        <h5 class="pr">城市周边的秀美山川</h5>
                        <span class="tourism-route">中峰洞-高桥沟-达古冰川</span>
                    </a></li>
                    <li title="查看专题"><a href="javascript:;">
                        <img src="/public/images/index/demo/demo_06/tourism_1_small.jpg">
                        <h5 class="pr">城市周边的秀美山川</h5>
                        <span class="tourism-route">中峰洞-高桥沟-达古冰川</span>
                    </a></li>
                    <li title="查看专题"><a href="javascript:;">
                        <img src="/public/images/index/demo/demo_06/tourism_1_small.jpg">
                        <h5 class="pr">城市周边的秀美山川</h5>
                        <span class="tourism-route">中峰洞-高桥沟-达古冰川</span>
                    </a></li>
                    <li title="查看专题"><a href="javascript:;">
                        <img src="/public/images/index/demo/demo_06/tourism_1_small.jpg">
                        <h5 class="pr">城市周边的秀美山川</h5>
                        <span class="tourism-route">中峰洞-高桥沟-达古冰川</span>
                    </a></li>
                    <li title="查看专题"><a href="javascript:;">
                        <img src="/public/images/index/demo/demo_06/tourism_1_small.jpg">
                        <h5 class="pr">城市周边的秀美山川</h5>
                        <span class="tourism-route">中峰洞-高桥沟-达古冰川</span>
                    </a></li>
                    <li title="查看专题"><a href="javascript:;">
                        <img src="/public/images/index/demo/demo_06/tourism_1_small.jpg">
                        <h5 class="pr">城市周边的秀美山川</h5>
                        <span class="tourism-route">中峰洞-高桥沟-达古冰川</span>
                    </a></li>
                    <li title="查看专题"><a href="javascript:;">
                        <img src="/public/images/index/demo/demo_06/tourism_1_small.jpg">
                        <h5 class="pr">城市周边的秀美山川</h5>
                        <span class="tourism-route">中峰洞-高桥沟-达古冰川</span>
                    </a></li>
                    <li class="big" title="查看专题"><a href="javascript:;">
                        <img src="/public/images/index/demo/demo_06/tourism_1.jpg">
                        <h5 class="pr">湖光山色，短途畅游</h5>
                        <h6 class="pr">不走远路也能领略湖光山色的美景。</h6>
                        <span class="tourism-route">轿顶山-莲花湖-年保玉则-马湖-木格措</span>
                    </a></li>
                </ul>
            </div>
        </div>
        <!--用户路书-->
        <div class="section-gray">
            <div class="section-inner">
                <div class="section-inner-left">
                    <div class="section-inner-title">
                        <h4>用户路书</h4>
                        <a class="more-info" href="javascript:;">更多路书</a>
                    </div>
                    <ul class="itinerary-list left">
                        <li class="itinerary-item">
                            <a href="javascript:;" class="itinerary-img-box">
                                <img src="/public/images/index/demo/demo_06/itinerary_1_small.jpg" alt="">
                            </a>
                            <a href="javascript:;" class="itinerary-title">暑期抚仙湖、建水、元阳、河口、普者黑、坝美自驾游</a>
                            <p class="itinerary-lite-info">
                                <img src="/public/images/index/demo/demo_06/ico_user_head.gif" alt="" class="author-head">
                                <span class="author-name">爱好_开车</span>
                                <span class="create-time">2015-05-05</span>
                            </p>
                            <p class="itinerary-abstract">
                                四川省乐山市五通桥区涌江路-滇池-澄江鑫浩农家乐-建水倘甸烤鱼店-建水朋友烧烤
                            </p>
                            <div class="itinerary-mark">
                                <p class="mark-item" title="评论数"><i class="reply"></i><span>4</span></p>
                                <p class="mark-item" title="复制数"><i class="copy"></i><span>10</span></p>
                                <p class="mark-item" title="浏览数"><i class="view"></i><span>380</span></p>
                            </div>
                        </li>
                        <li class="itinerary-item">
                            <a href="javascript:;" class="itinerary-img-box">
                                <img src="/public/images/index/demo/demo_06/itinerary_4_small.jpg" alt="">
                            </a>
                            <a href="javascript:;" class="itinerary-title">千树万树梨花开，金川赏花露营4日游</a>
                            <p class="itinerary-lite-info">
                                <img src="/public/images/index/demo/demo_06/ico_user_head.gif" alt="" class="author-head">
                                <span class="author-name">楿烟Dě菋檤</span>
                                <span class="create-time">2015-03-09</span>
                            </p>
                            <p class="itinerary-abstract">
                                成都-四川省阿坝藏族羌族自治州理县g317-金川县沙尔乡-金川县阿科里乡
                            </p>
                            <div class="itinerary-mark">
                                <p class="mark-item" title="评论数"><i class="reply"></i><span>0</span></p>
                                <p class="mark-item" title="复制数"><i class="copy"></i><span>0</span></p>
                                <p class="mark-item" title="浏览数"><i class="view"></i><span>61</span></p>
                            </div>
                        </li>
                    </ul>
                    <ul class="itinerary-list middle">
                        <li class="itinerary-item">
                            <a href="javascript:;" class="itinerary-img-box">
                                <img src="/public/images/index/demo/demo_06/itinerary_2_small.jpg" alt="">
                            </a>
                            <a href="javascript:;" class="itinerary-title">酸甜的蓝莓之旅，安仁西岭雪山周末游</a>
                            <p class="itinerary-lite-info">
                                <img src="/public/images/index/demo/demo_06/ico_user_head.gif" alt="" class="author-head">
                                <span class="author-name">楿烟Dě菋檤</span>
                                <span class="create-time">2015-05-22</span>
                            </p>
                            <p class="itinerary-abstract">
                                四川省成都市-安仁蓝莓博览园-安仁博物馆小镇-夜不收荤豆花-大邑鑫河国际酒店
                            </p>
                            <div class="itinerary-mark">
                                <p class="mark-item" title="评论数"><i class="reply"></i><span>4</span></p>
                                <p class="mark-item" title="复制数"><i class="copy"></i><span>10</span></p>
                                <p class="mark-item" title="浏览数"><i class="view"></i><span>380</span></p>
                            </div>
                        </li>
                        <li class="itinerary-item">
                            <a href="javascript:;" class="itinerary-img-box">
                                <img src="/public/images/index/demo/demo_06/itinerary_3_small.jpg" alt="">
                            </a>
                            <a href="javascript:;" class="itinerary-title">怀远古镇，鸡冠山一日游</a>
                            <p class="itinerary-lite-info">
                                <img src="/public/images/index/demo/demo_06/ico_user_head.gif" alt="" class="author-head">
                                <span class="author-name">stephen</span>
                                <span class="create-time">2014-11-27</span>
                            </p>
                            <p class="itinerary-abstract">
                                海椒市街-怀远美食一条街-鸡冠山
                            </p>
                            <div class="itinerary-mark">
                                <p class="mark-item" title="评论数"><i class="reply"></i><span>0</span></p>
                                <p class="mark-item" title="复制数"><i class="copy"></i><span>6</span></p>
                                <p class="mark-item" title="浏览数"><i class="view"></i><span>707</span></p>
                            </div>
                        </li>
                    </ul>
                    <ul class="itinerary-list right">
                        <li class="itinerary-item">
                            <a href="javascript:;" class="itinerary-img-box">
                                <img src="/public/images/index/demo/demo_06/itinerary_3_small.jpg" alt="">
                            </a>
                            <a href="javascript:;" class="itinerary-title">怀远古镇，鸡冠山一日游</a>
                            <p class="itinerary-lite-info">
                                <img src="/public/images/index/demo/demo_06/ico_user_head.gif" alt="" class="author-head">
                                <span class="author-name">stephen</span>
                                <span class="create-time">2014-11-27</span>
                            </p>
                            <p class="itinerary-abstract">
                                海椒市街-怀远美食一条街-鸡冠山
                            </p>
                            <div class="itinerary-mark">
                                <p class="mark-item" title="评论数"><i class="reply"></i><span>0</span></p>
                                <p class="mark-item" title="复制数"><i class="copy"></i><span>6</span></p>
                                <p class="mark-item" title="浏览数"><i class="view"></i><span>707</span></p>
                            </div>
                        </li>
                        <li class="itinerary-item">
                            <a href="javascript:;" class="itinerary-img-box">
                                <img src="/public/images/index/demo/demo_06/itinerary_4_small.jpg" alt="">
                            </a>
                            <a href="javascript:;" class="itinerary-title">千树万树梨花开，金川赏花露营4日游</a>
                            <p class="itinerary-lite-info">
                                <img src="/public/images/index/demo/demo_06/ico_user_head.gif" alt="" class="author-head">
                                <span class="author-name">楿烟Dě菋檤</span>
                                <span class="create-time">2015-03-09</span>
                            </p>
                            <p class="itinerary-abstract">
                                成都-四川省阿坝藏族羌族自治州理县g317-金川县沙尔乡-金川县阿科里乡
                            </p>
                            <div class="itinerary-mark">
                                <p class="mark-item" title="评论数"><i class="reply"></i><span>0</span></p>
                                <p class="mark-item" title="复制数"><i class="copy"></i><span>0</span></p>
                                <p class="mark-item" title="浏览数"><i class="view"></i><span>61</span></p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="section-inner-right">
                    <div class="inner">
                        <p>最新发布</p>
                        <ul class="recent-itinerary-list">
                            <li class="recent-itinerary-item">
                                <span class="author">wangchen</span>
                                <span class="update-time">5分钟前</span>
                                <span class="">发布</span>
                                <a class="name" href="javascript:;" title="2016-三亚、海陵岛">2016-三亚、海陵岛</a>
                            </li>
                            <li class="recent-itinerary-item">
                                <span class="author">拥风而舞</span>
                                <span class="update-time">1天前</span>
                                <span class="">发布</span>
                                <a class="name" href="javascript:;" title="山东起止江南美景全收录">山东起止江南美景全收录</a>
                            </li>
                            <li class="recent-itinerary-item">
                                <span class="author">映美影像</span>
                                <span class="update-time">2天前</span>
                                <span class="">发布</span>
                                <a class="name" href="javascript:;" title="云南露营自驾游">云南露营自驾游</a>
                            </li>
                            <li class="recent-itinerary-item">
                                <span class="author">爱好_开车</span>
                                <span class="update-time">3天前</span>
                                <span class="">发布</span>
                                <a class="name" href="javascript:;" title="春节期间自驾丙中洛腾冲瑞丽，晒太阳，感受不一样的季节">春节期间自驾丙中洛腾冲瑞丽，晒太阳，感受不一样的季节</a>
                            </li>
                            <li class="recent-itinerary-item">
                                <span class="author">海之缘-徐大飛</span>
                                <span class="update-time">7天前</span>
                                <span class="">发布</span>
                                <a class="name" href="javascript:;" title="文昌拓展2日游">文昌拓展2日游</a>
                            </li>
                            <li class="recent-itinerary-item">
                                <span class="author">wangchen</span>
                                <span class="update-time">9天前</span>
                                <span class="">发布</span>
                                <a class="name" href="javascript:;" title="2016-广东、三亚">2016-广东、三亚</a>
                            </li>
                            <li class="recent-itinerary-item">
                                <span class="author">天迹云踪</span>
                                <span class="update-time">13天前</span>
                                <span class="">发布</span>
                                <a class="name" href="javascript:;" title="2016-广东、三亚">稻城4天自驾游</a>
                            </li>
                            <li class="recent-itinerary-item">
                                <span class="author">海之缘-徐大飛</span>
                                <span class="update-time">7天前</span>
                                <span class="">发布</span>
                                <a class="name" href="javascript:;" title="文昌拓展2日游">文昌拓展2日游</a>
                            </li>
                            <li class="recent-itinerary-item">
                                <span class="author">wangchen</span>
                                <span class="update-time">9天前</span>
                                <span class="">发布</span>
                                <a class="name" href="javascript:;" title="2016-广东、三亚">2016-广东、三亚</a>
                            </li>
                            <li class="recent-itinerary-item">
                                <span class="author">天迹云踪</span>
                                <span class="update-time">13天前</span>
                                <span class="">发布</span>
                                <a class="name" href="javascript:;" title="2016-广东、三亚">稻城4天自驾游</a>
                            </li>
                        </ul>
                    </div>
                    <div class="inner recent-reply">
                        <p>最新评论</p>
                        <ul class="recent-reply-list">
                            <li class="recent-reply-item">
                                <span class="user">落落</span> 评论 <a href="javascript:;" title="酸甜的蓝莓之旅，安仁西岭雪山周末游">酸甜的蓝莓之旅，安仁西岭雪山周末游</a>：
                                <div class="content">规划的很不错，准备暑假去</div>
                            </li>
                            <li class="recent-reply-item">
                                <span class="user">家有姊妹花</span> 评论 <a href="javascript:;" title="6月13日青海大环线顺时针">6月13日青海大环线顺时针</a>：
                                <div class="content">介绍很详细，不错</div>
                            </li>
                            <li class="recent-reply-item">
                                <span class="user">落落</span> 评论 <a href="javascript:;" title="酸甜的蓝莓之旅，安仁西岭雪山周末游">酸甜的蓝莓之旅，安仁西岭雪山周末游</a>：
                                <div class="content">规划的很不错，准备暑假去</div>
                            </li>
                            <li class="recent-reply-item">
                                <span class="user">家有姊妹花</span> 评论 <a href="javascript:;" title="6月13日青海大环线顺时针">6月13日青海大环线顺时针</a>：
                                <div class="content">介绍很详细，不错介绍很详细，不错介绍很详细，不错介绍很详细，不错介绍很详细，不错介绍很详细，不错介绍很详细，不错介绍很详细，不错介绍很详细，不错介绍很详细，不错介绍很详细，不错介绍很详细，不错</div>
                            </li>
                            <li class="recent-reply-item">
                                <span class="user">落落</span> 评论 <a href="javascript:;" title="西北行">西北行</a>：
                                <div class="content">15天能去这么多地方呀？</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-inner">
            <div class="copyright-box">
                <img src="/public/images/index/demo/demo_06/logo.png" class="logo">
                <p class="copyright">2014@行动派旅行网  蜀ICP备13013955-2号<br>
                    行动派旅行网为爱好自驾游、自助游的朋友提供旅行规划、定制个性化的旅行路书</p>
            </div>
            <ul class="link-list">
                <li><a href="javascript:;">我们的团队</a></li>
                <li><a href="javascript:;">联系我们</a></li>
                <li><a href="javascript:;">百度贴吧</a></li>
                <li><a href="javascript:;">官方博客</a></li>
                <li><a href="javascript:;">隐私申明</a></li>
                <li><a href="javascript:;">商务合作</a></li>
                <li><a href="javascript:;">用户协议</a></li>
            </ul>
        </div>
    </div>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/unslider/2.0.3/js/unslider-min.js"></script>
<script src="/public/scripts/base.js"></script>
<script>
    //预加载相关
    var preload = {
        loadImg:function(imgPrefix,imgList){
            var images={};
            var loadNum = 0;
            for(var item in imgList){
                images[item] = new Image();
                images[item].src = imgPrefix + imgList[item];
                images[item].onload = function(){
                    loadNum++;
                    preload.loadingBar(parseInt((loadNum / imgList.length)*100));
                }
            }
        },
        loadingBar:function(num){
            var percent = num + "%";
            $(".loading-logo").css("left","calc("+percent+" - 42px)");
            $(".loading-text").text(percent);
            $(".loading-line-box").css("width","calc("+percent+" - 42px)");
            if(num == 100) preload.showPage();
        },
        showPage:function(){
            setTimeout(function(){
                $(".loading").addClass("active");
            },300);
            setTimeout(function(){
                $(".loading-text").css("opacity","1").text("行动派");
            },1250);
            setTimeout(function(){
                $(".loading").slideUp();
                $(".page-outer").css("opacity","1");
                //顶部图片轮播
                $('.top-slider').unslider({
                    arrows: false
                    ,autoplay:true
                });
                $(".top-slider").css("height",$(".top-slider").width() * 800 / 1920);
                $(window).resize(function(){
                    $(".top-slider").css("height",$(".top-slider").width() * 800 / 1920);
                });
            },3000);
        },
        init:function(){
            var imgPrefix = "/public/images/index/demo/demo_06/";
            var imgList = [
                "ico_copy_count.png"
                ,"ico_reply_count.png"
                ,"ico_user_head.gif"
                ,"ico_view_count.png"
                ,"img1.png"
                ,"img2.png"
                ,"img3.png"
                ,"itinerary_1_small.jpg"
                ,"itinerary_2_small.jpg"
                ,"itinerary_3_small.jpg"
                ,"itinerary_4_small.jpg"
                ,"logo_white.png"
                ,"tourism_1.jpg"
                ,"tourism_1_small.jpg"];
            preload.loadImg(imgPrefix,imgList);
        }
    };
    //滚动监听
    var mouseScroll = {
        startTime : 0,
        operation : function(event){
            //350毫秒执行一次操作
            if(new Date().getTime() - mouseScroll.startTime < 100) return false;
            mouseScroll.startTime = new Date().getTime();
            var direction = 0;
            event.type == "DOMMouseScroll" ? direction = event.detail / 3 : direction = - event.wheelDelta  / 120;
            if(direction > 0){
                $(".header").slideUp(100);
            }else if(direction < 0){
                $(".header").slideDown(100);
            }
        },
        init:function(){
            window.onmousewheel = function (event) {
                mouseScroll.operation(event);
            };
            window.addEventListener("DOMMouseScroll", function(event) {
                mouseScroll.operation(event);
            });
        }
    };
    //统一执行入口
    $(function(){
        mouseScroll.init();
        preload.init();
    })
</script>
</body>
</html>